<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/aui.2.0.css" />
</head>

<body>
    <header class="aui-bar aui-bar-nav" style="background-color: #03a9f4;position:fixed;" id="header">
        <a class="aui-pull-left aui-btn" tapmode onclick="closeWin();">
            <span class="aui-iconfont aui-icon-left"></span>
        </a>
        <div class="aui-title" id="title">
            质量可视化
        </div>
    </header>
    <div class="aui-content aui-margin-b-15" style="margin-top:50px;">
        <ul class="aui-list aui-form-list">
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">开始日期</div>
                    <div class="aui-list-item-input" onclick="timePicker('dateStart');">
                        <input type="text" placeholder="选择日期" class="aui-input" id="dateStart">
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">结束日期</div>
                    <div class="aui-list-item-input" onclick="timePicker('dateEnd');">
                        <input type="text" placeholder="选择日期" class="aui-input" id="dateEnd">
                    </div>
                </div>
            </li>
        </ul>
        <div style="width:100%;margin-top:2%;"></div>
        <div class="aui-btn aui-btn-info aui-btn-block" onclick="search()">查询</div>
    </div>
    <div id="echartBar"
        style="height: 600px;width: 100%;white-space: nowrap;overflow-x: auto;overflow-y: auto;-webkit-overflow-scrolling:touch;">
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../script/public.js"></script>
<script type="text/javascript" src="../script/echarts.min.js"></script>
<script type="text/javascript">
    //初始化
    apiready = function () {

        //初始化当前日期
        crateDate();
    }

    //获取当前日期
    function crateDate() {
        var dateStart = getCurrentMonthFirst();
        var dateEnd = getCurrentMonthLast();
        $("#dateStart").val(dateStart);
        $("#dateEnd").val(dateEnd);

        //初始化查询
        search();
    }

    //获取当前月份第一天
    function getCurrentMonthFirst() {
        var date = new Date();
        date.setDate(1);
        var month = parseInt(date.getMonth() + 1);
        var day = date.getDate();
        if (month < 10) {
            month = '0' + month
        }
        if (day < 10) {
            day = '0' + day
        }
        return date.getFullYear() + '-' + month + '-' + day;
    }

    //获取当前月份最后一天
    function getCurrentMonthLast() {
        var date = new Date();
        var currentMonth = date.getMonth();
        var nextMonth = ++currentMonth;
        var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
        var oneDay = 1000 * 60 * 60 * 24;
        var lastTime = new Date(nextMonthFirstDay - oneDay);
        var month = parseInt(lastTime.getMonth() + 1);
        var day = lastTime.getDate();
        if (month < 10) {
            month = '0' + month
        }
        if (day < 10) {
            day = '0' + day
        }
        return date.getFullYear() + '-' + month + '-' + day;
    }

    //时间选择器
    function timePicker(id) {
        api.openPicker({
            type: 'date',
            date: new Date(),
            title: '选择日期'
        }, function (ret, err) {
            if (ret) {
                var monthTemp = (ret.month < 10 ? '0' + ret.month : ret.month);
                var dayTemp = (ret.day < 10 ? '0' + ret.day : ret.day);
                var date = ret.year + "-" + monthTemp + "-" + dayTemp;
                $("#" + id).val(date);
            }
        });
    }

    //查询生产
    function search() {

        //计划日期起
        var dateStart = $("#dateStart").val();
        //计划日期止
        var dateEnd = $("#dateEnd").val();
        if (dateStart == null || dateStart == "" || dateStart == undefined) {
            api.toast({
                msg: "请选择开始日期",
                duration: 3000
            });
            return;
        }
        if (dateEnd == null || dateEnd == "" || dateEnd == undefined) {
            api.toast({
                msg: "请选择结束日期",
                duration: 3000
            });
            return;
        }

        var un = localStorage.getItem('un');
        var serverUrl = localStorage.getItem('serverUrl');
        var url = serverUrl + "/app/searchQuality";
        var data = {
            values: {
                dateStart: dateStart,
                appVersion: api.appVersion,
                dateEnd: dateEnd,
                un: un
            }
        };

        api.ajax({
            url: url,
            method: 'post',
            dataType: 'json',
            timeout: 30,
            returnAll: false,
            data: data
        }, function (ret, err) {
            if (ret) {

                var data = JSON.stringify(ret);
                var myobj = eval("(" + data + ")");

                //成功
                if (myobj.code == "0") {
                    var xData = myobj.xData; //arr2

                    var yDataBar = myobj.yDataBar;//arr

                    var yDataLine = myobj.yDataLine;//arr3

                    //2：构造柱状图
                    if (xData.length > 0) {
                        createBar(xData, yDataBar, yDataLine);
                    } else {

                        var myChart = echarts.init(document.getElementById('echartBar'));
                        myChart.setOption({}, true);
                    }
                } else {
                    api.toast({
                        msg: myobj.message,
                        duration: 3000
                    });
                }
            } else {
                alert(JSON.stringify(err));
            }
        });
    }

    //柱状图
    function createBar(xData, yDataBar, yDataLine) {

        var myChart = echarts.init(document.getElementById('echartBar'));

        var colors = ["red", "blue", "green", "black", "orange", "purple"];
        var option = {
            title: {
                text: '缺陷原因图表',
            },
            grid: {
                left: '10%',
                right: '12%',
                bottom: '22%',
            },
            // tooltip: {
            //     trigger: 'axis',
            //     axisPointer: { // 坐标轴指示器，坐标轴触发有效
            //         type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            //     },
            //     formatter: function(params) {
            //         // var relVal = "";
            //         // for (var i = 0, l = params.length; i < l; i++) {
            //         //     if (params[i].seriesName == 'Acutal') {
            //         //         relVal += params[i].seriesName + ': ' + params[i].value + '<br/>';
            //         //     } else if (params[i].seriesName == 'Forecast') {
            //         //         relVal += params[i].seriesName + ': ' + params[i].value + "%" + '<br/>';
            //         //     }
            //         // }
            //         // return relVal;
            //         return params;
            //     }
            // },
            calculable: true,
            xAxis: [{
                type: 'category',
                data: xData,
                splitLine: false,
                axisLabel: {
                    interval: 0, //坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
                    rotate: 38 //调整数值改变倾斜的幅度（范围-90到90）
                },
                axisTick: {
                    show: false
                },
            }, {
                type: 'category',
                show: false,
                boundaryGap: false,
                data: ['Cosco', 'CMA', 'APL', 'OOCL', 'Wanhai', 'Zim', "333"],
                splitLine: false,
                axisTick: {
                    show: false
                },
            }],
            yAxis: [{
                type: 'value',
                boundaryGap: [0, 0.1],
                // splitLine: false,
            }, {
                type: 'value',
                name: '占比',
                axisLabel: {
                    formatter: '{value} %'
                },
                // splitLine: false
            }],
            series: [{
                name: 'Acutal',
                type: 'bar',
                barCategoryGap: '0%',
                itemStyle: {
                    normal: {
                        color: function (obj) {
                            if (obj.dataIndex >= 0) {
                                return colors[obj.dataIndex];
                            }
                        },
                        barBorderColor: 'tomato',
                        barBorderWidth: 1,
                        barBorderRadius: 2,
                        label: {
                            show: true,
                            position: 'insideTop'
                        }
                    }
                },
                data: yDataBar
            }, {
                name: 'Forecast',
                type: 'line',
                xAxisIndex: 1,
                yAxisIndex: 1,
                symbol: 'circle', //设定为实心点
                symbolSize: 20, //设定实心点的大小
                itemStyle: {
                    normal: {
                        lineStyle: {
                            color: '#87CEEB'
                        },
                        color: '#f37b1d',
                        label: {
                            show: true,
                            formatter: '{c}%'
                        }
                    }
                },
                data: yDataLine,
            }]
        };

        myChart.setOption(option, true);
    }

    //返回按钮
    function closeWin() {
        api.closeWin({});
    }
</script>

</html>